<template>  
    <div class="category-list">  
      <h2>分类列表</h2>  
      <ul>  
        <li v-for="category in categories" :key="category.id">  
          <router-link :to="'/category/' + category.id">{{ category.name }}</router-link>  
        </li>  
      </ul>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        categories: [  
          { id: 1, name: '电子产品' },  
          { id: 2, name: '家具家电' },  
          { id: 3, name: '书籍资料' },  
          { id: 4, name: '交通工具' },  
          // 添加更多分类  
        ],  
      };  
    },  
  };  
  </script>  
    
  <style scoped>  
  .category-list {  
    padding: 20px;  
  }  
    
  .category-list ul {  
    list-style-type: none;  
    padding: 0;  
  }  
    
  .category-list li {  
    margin: 10px 0;  
    font-size: 1.2em;  
  }  
    
  .category-list a {  
    text-decoration: none;  
    color: #42b983;  
  }  
    
  .category-list a:hover {  
    text-decoration: underline;  
  }  
  </style>